let data = []
let nikeName = ''
const requestUserDate = () => {
  axios.post(
    "../../php/getUserData.php",
    {
      nikeName
    },
    {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
  ).then(result => {
    data = result.data.data
    // console.log(result.data)
  }).catch(error => {
    console.log(error)
  })
}

//刷新队伍信息
const reRenderUser = () => {
  // 使用 table.reload 更新表格数据
  layui.use('table', function () {
    var table = layui.table
    table.reloadData('table_user', {
      data
    })
  })
}



//删除用户
const delUser = (userId) => {
  layui.use(['layer'], function () {
    var layer = layui.layer
    layer.confirm('确定要删除这名用户吗？', {
      icon: 3,    // 图标
      title: '删除用户',  // 标题
      btn: ['确定', '取消'],  // 按钮
    }, function (index) {  // 确定按钮的回调函数
      // 执行删除操作
      axios.get('../../php/delUser.php', {
        params: {
          userId
        }
      }).then(res => {
        // console.log(res.data)
        layui.use('layer', function () {
          var layer = layui.layer
          if (res.data.status) {
            layer.msg('删除成功，请刷新页面')
            setTimeout(() => {
              window.location.reload()
            }, 1500)
          }
          else {
            layer.msg('删除失败，请检查外键约束')
          }
        })
      })
    }, function (index) {  // 取消按钮的回调函数
      layer.close(index)  // 关闭弹出层
    })
  })

}

//编辑用户信息
const updateUser = (userId) => {
  layer.open({
    // type: 2,
    type: 2,
    title: ['修改用户信息', 'font-size:24px;font-weight:bold;'],
    area: ['1000px', '700px'],
    content: `../../content/user/updateUser.php?userId=${userId}`,
    maxmin: true,
  })
}


const renderTable = () => {
  //显示数组中的元素
  layui.use(['table'], function () {
    table = layui.table
    table.render({
      elem: '#table_user',
      height: 600,
      data: data,
      title: '球队表',
      page: true, //开启分页
      // totalRow: true, // 开启合计行
      toolbar: '#toolbarDemo',
      autoSort: true,
      skin: 'grid',
      limit: 8, //设置每页显示条数,根据自己项目情况去设置
      limits: [8, 10, 50, 100, 500], //设置每页条数下拉框的选择项,就是分页那一栏的下拉框选项  
      cols: [
        [ //表头
          {
            type: 'checkbox',
            fixed: 'left'
          },
          {
            field: 'userId',
            fixed: 'left',
            title: '用户Id',
            align: 'center',
            width: 120,
            style: 'background-color: #eee;',
            sort: true,
          },
          {
            field: 'userName',
            title: '用户名',
            align: 'center',
            width: 160
          }, {
            field: 'userPassword',
            title: '用户密码',
            width: 160,
            align: 'center'
          }, {
            field: 'nikeName',
            title: '用户昵称',
            align: 'center',
            style: 'font-weight:bold;',
            width: 140,
          }, {
            field: 'voteTeam',
            title: '支持队伍',
            width: 150,
            align: 'center'
          }, {
            field: 'gender',
            title: '性别',
            width: 120,
            align: 'center',
            style: 'font-weight:bold;',
            sort: true,
            templet: (d) => {
              res = ''
              if (d.gender == 1) {
                res = '<span style="color:#6495ED;"><i class="layui-icon layui-icon-male"></i>男</span>'
              }
              else {
                res = '<span style="color:#FFC0CB;"><i class="layui-icon layui-icon-female"></i>女</span>'
              }
              return res
            }
          }, {
            field: 'age',
            title: '年龄',
            width: 120,
            align: 'center',
            sort: true
          }, {
            field: 'birthday',
            title: '生日',
            width: 160,
            align: 'center',
            sort: true
          }, {
            field: 'phone',
            title: '手机号',
            width: 200,
            align: 'center'
          }, {
            field: 'address',
            title: '地址',
            width: 140,
            align: 'center'
          },
          {
            fixed: "right",
            title: '操作',
            width: 130,
            align: 'center',
            toolbar: '#actionBar'
          }
        ]
      ],
      size: 'lg'
    })
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id)
      switch (obj.event) {
        case 'getCheckData':
          var data = checkStatus.data
          layer.alert(JSON.stringify(data))
          break
        case 'getCheckLength':
          var data = checkStatus.data
          layer.msg('选中了：' + data.length + ' 个')
          break
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选' : '未全选')
          break

        //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮')
          break
      };
    })

    //监听行工具事件
    table.on('tool(test)', function (obj) {
      //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data, //获得当前行数据      
        layEvent = obj.event //获得 lay-event 对应的值

      if (layEvent === 'del') {
        delUser(data.userId)
      } else if (layEvent === 'edit') {
        updateUser(data.userId)
      }
    })
  })
}

const query = document.querySelector('[name="userquery"]')
const search = document.querySelector('[name="search"]')
search.addEventListener('click', (e) => {
  // console.log(query.value)
  nikeName = query.value
  axios.post(
    "../../php/getUserData.php",
    {
      nikeName
    },
    {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
  ).then(result => {
    data = result.data.data
    // console.log(result.data)
    reRenderUser()
  }).catch(error => {
    console.log(error)
  })
  renderTable()
})

requestUserDate()
renderTable()

layui.use(function () {
  var layer = layui.layer
  var util = layui.util
  var $ = layui.$

  $("#addUser").click(() => {
    layer.open({
      // type: 2,
      type: 2,
      title: ['添加用户', 'font-size:24px;font-weight:bold;'],
      area: ['1000px', '650px'],
      content: '../../content/user/addUser.php',
      maxmin: true,
    })
  }),
    $("#refresh").click(() => {
      // console.log(11)
      window.location.reload()
    })
})




